<template>
  <div class="box">
    <div class="left">
      <div
        class="item"
        :class="{ active: isActive == item._id }"
        v-for="(item,index) in departList"
        :key="item._id"
        @click="getTweDepart(item._id,index)"
      >
        {{ item.DepartName }}
      </div>
    </div>
    <div class="right">
      <div class="item" v-for="item in departList" :key="item._id">
        <div class="title">
          <h1 class="cur">{{ item.DepartName }}</h1>
        </div>
        <div class="list">
          <ul v-if="item.TwoDepart.length > 0">
            <li v-for="(TwoDepart, index) in item.TwoDepart" :key="index" @click="goOrders(TwoDepart)" >
              {{ TwoDepart }}
            </li>
          </ul>
          <p v-else>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getDepartListAPI } from "@/api/deoart";
import { useRouter } from "vue-router";
let departList = ref([]);
let isActive = ref(0);
let router = useRouter()
onMounted(() => {
  getDepartlist();
});
//获取科室列表
const getDepartlist = async () => {
  let result = await getDepartListAPI(1, 99);
  departList.value = result.data;
  isActive.value = result.data[0]._id;
};
//二级科室
const getTweDepart = (id,index) => {
  isActive.value = id;
  let allH1 = document.querySelectorAll(".title");
  allH1[index].scrollIntoView({
    //加上过度动画
    behavior:'smooth',
    block:'start',
  });
 
  
  
};
//跳转
const goOrders = (TwoDepart)=>{
  router.push({
    path:'/user/orders',
    query:{
      TwoDepart
    }
  })
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  display: flex;
 
  .left {
    flex: 2;
    background-color: rgb(248, 248, 248);
    margin-right: 10px;
    max-height: 800px;
    overflow: hidden;
    overflow-y: scroll;
    //优化滚动条，变好看
    &::-webkit-scrollbar {
      width: 5px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgb(221, 221, 221);
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: rgb(248, 248, 248);
    }
    .item {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      //鼠标
      cursor: pointer;
      font-size: 14px;
      color: rgb(153, 153, 153);
      transition: all 0.5s;
    }
    .active {
      border-left: 1px solid red;
      color: red;
      background-color: white;
    }
  }
  .right {
    flex: 14;
    background-color: rgb(248, 248, 248);
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    
    max-height: 700px;
    overflow: hidden;
    overflow-y: scroll;
    
    &::-webkit-scrollbar {
      width: 5px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: rgb(221, 221, 221);
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: rgb(248, 248, 248);
    }
    .item {
      width: 100%;
      margin: 5px 0px;
      .title {
        color: #6a6969;
        font-size: 16px;
        font-weight: 900;
        margin-bottom: 5px;
      }
      .list {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin: 10px 10px;
            padding: 5px 10px;
            border: 1px solid rgb(221, 221, 221);
            border-radius: 10px;
            color: rgb(153, 153, 153);
            cursor: pointer;
            transition: all 0.5s;
            &:hover {
              color: white;
              background-color: rgb(221, 221, 221);
            }
          }
        }
        p {
          color: rgb(153, 153, 153);
          text-align: center;
          font-size: 14px;
          line-height: 100px;
        }
      }
    }
  }
}
</style>
